<template>
  <div class="jc-component__range">
    <div
      class="jc-range"
      :class="{success: status && !loading, loading: loading}"
    >
      <div
        ref="slider"
        class="jc-range-slider"
        @mousedown.self="rangeMove"
        @touchstart.self="touchStart"
        @touchend.self="touchEnd"
        @touchmove.self="touchMove"
      />
      {{ status ? successText : startText }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'LogoSlider',
  props: {
    // 成功之后的函数
    successFun: { type: Function, default: () => {} },
    // 成功图标
    successIcon: { type: String, default: 'el-icon-success' },
    // 成功文字
    successText: { type: String, default: '验证成功' },
    // 开始的图标
    startIcon: { type: String, default: 'el-icon-d-arrow-right' },
    // 开始的文字
    startText: { type: String, default: '拖动滑块到最右边' },
    // 失败之后的函数
    errorFun: { type: Function, default: () => {} },
    // 或者用值来进行监听
    status: { type: Boolean, default: false },
    // 加载状态
    loading: { type: Boolean, default: false }
  },
  data() {
    return {
      /* 滑块对象 */
      sliderEle: {},
      /* 滑动长度 */
      MaxX: 0,
      eleWidth: 0,
      startX: 0,
      disX: 0,
      touchX: 0,
      active: false
    }
  },
  watch: {
    status(val) {
      if (!val) {
        this.$refs.slider.style.transform = 'translateX(0)'
      }
    }
  },
  mounted() {
    const ele = this.$refs.slider
    this.sliderEle = ele
    this.startX = ele.clientX || 0
    this.eleWidth = ele.offsetWidth
    this.MaxX = ele.parentElement.offsetWidth - this.eleWidth
  },
  methods: {
    rangeMove(e) {
      const ele = e.target
      const startX = e.clientX
      if (this.status) { // 不运行
        return false
      }
      document.onmousemove = (e) => {
        const endX = e.clientX
        this.disX = endX - startX
        if (this.disX <= 0) {
          this.disX = 0
        }
        if (this.disX >= this.MaxX - this.eleWidth) { // 减去滑块的宽度,体验效果更好
          this.disX = this.MaxX
        }
        ele.style.transition = '.1s all'
        ele.style.transform = `translateX(${this.disX}px)`
        e.preventDefault()
      }
      document.onmouseup = () => {
        if (this.disX !== this.MaxX) {
          ele.style.transition = '.5s all'
          ele.style.transform = 'translateX(0)'
          // 执行失败的函数
          this.errorFun && this.errorFun()
        } else {
          this.$emit('update:status', true)
          // 执行成功的函数
          this.successFun && this.successFun()
        }
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    /**
     * 滑块开始
     */
    touchStart(e) {
      if (this.status) { // 不运行
        return false
      }
      this.touchX = e.clientX || e.changedTouches[0].pageX
      this.active = true
    },
    /**
     * 滑块结束
     * @param e
     */
    touchEnd(e) {
      if (this.status) { // 不运行
        return false
      }
      this.active = false
      const ele = e.target
      if (this.disX !== this.MaxX) {
        ele.style.transition = '.5s all'
        ele.style.transform = 'translateX(0)'
        // 执行失败的函数
        this.errorFun && this.errorFun()
      } else {
        this.$emit('update:status', true)
        // 执行成功的函数
        this.successFun && this.successFun()
      }
      document.onmousemove = null
      document.onmouseup = null
    },
    /**
     * 滑块
     * @param e
     */
    touchMove(e) {
      if (this.status || !this.active) { // 不运行
        return false
      }
      const ele = e.target
      const endX = e.clientX || e.changedTouches[0].pageX
      this.disX = endX - this.touchX
      if (this.disX <= 0) {
        this.disX = 0
      }
      if (this.disX >= this.MaxX - this.eleWidth) { // 减去滑块的宽度,体验效果更好
        this.disX = this.MaxX
      }
      ele.style.transition = '.1s all'
      ele.style.transform = `translateX(${this.disX}px)`
      e.preventDefault()
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.jc-range{
  overflow: hidden;
  border-radius: 5px;
  background-color: #b6c9f0;
  position: relative;
  transition: 1s all;
  user-select: none;
  color: #00082e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px; /*no*/
  .jc-range-slider {
    position: absolute;
    font-size: 20px;
    left: 0;
    width: 60px;/*no*/
    height: 100%;
    color: #FFF;
    background-color: #00082e;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .jc-range-slider:after {
    content: "\e6dc";
    font-family: element-icons;
  }
}
.jc-range.success{
  background-color: #50699a;
  color: #fff;
  .jc-range-slider {
    color: #fff;
  }
  .jc-range-slider:after {
    content: "\e79c";
  }
}
.jc-range.loading{
  .jc-range-slider:after {
    content: "\e6cf";
  }
}
</style>
